<template>
	<view>
		<view class="title">
			计算 computed
		</view>
		<view @click="num++">num:{{num}}</view>
		<view>doubleNum:{{doubleNum}}</view>
		<view @click="priceNum=priceNum+1.5">priceNum:{{priceNum}}</view>	
		<!-- 引用组件 -->
		<view>
			<cutdown :seconds="10" @stop="stopHd" ref="cutdown1" :auto="true"></cutdown>
		</view>
		<view>
			<cutdown :seconds="100" ref="cutdown2" ></cutdown>		
		</view>
		
		<button @click="$refs.cutdown2.tiker()" type="warn" size="mini"> 开始</button>
		<button @click="$refs.cutdown2.stop()" type="default" size="mini"> 停止</button>
		<button @click="$refs.cutdown2.reset()" type="primary·" size="mini"> 重置</button>
	</view>
</template>
<script>
	// uni 采用easycom技术 不需要导入和注册
	// componets/组件/组件.vue
	// 导入组件
	// import cutdown from '@/components/cutdown/cutdown.vue'
	export default { 
		// 注册组件
		// components:{cutdown},
		data(){
			return  {num:5}
		},
		created() {
			this.num = uni.getStorageSync("num")||1;
			// 通过ref来倒计时
			// this.$refs.cutdown.tiker()
		},
		methods:{
			stopHd(){
				uni.showToast({
					title:"倒计时结束"
				})
			}
		},
		mounted(){
			console.log(this.$refs.cutdown,"cutdown")
			 
		},
		// 监听
		watch:{
			//监听num值
			num: {
				// val新的值，ovaVal是之前的值（值类型）
				// 引用类是两个值是一样
			      handler(val, oldVal) {
			       uni.setStorageSync("num",val)
			      },
				  // 如果引用类型监听
			      deep: true
			 },
		},
		// 计算
		computed:{
			doubleNum:function(){
				// 计算的数据是只读
				return this.num*2
			},
			priceNum:{
				// 获取值的时候返回num*1.5
				// xxx = priceNum
				get(){
					return this.num*1.5
				},
				set(v){
					// 设置priceNum执行个num进行赋值
					// priceNum =xxx
					this.num = v/1.5;
				}
			}
		}
	}
</script>